window.onload = function() {


    //单击选择框-宽度变化
    $("#cleft_li01").click(function() {
        $("#cleft_li01").css({ "background-color": "#ececec" });
        $("#cleft_li02").css({ "background-color": "#f9f9f9" });
        $("#cleft_li03").css({ "background-color": "#f9f9f9" });
        $("#cleft_li04").css({ "background-color": "#f9f9f9" });
        $("#nav01").animate({ "left": "0%" }, 800);
        $("#nav02").animate({ "left": "0%" }, 800);
        $("#nav03").animate({ "left": "0%" }, 800);
        $("#nav04").animate({ "left": "0%" }, 800);

    })
    $("#cleft_li02").click(function() {
        $("#cleft_li01").css({ "background-color": "#f9f9f9" });
        $("#cleft_li02").css({ "background-color": "#ececec" });
        $("#cleft_li03").css({ "background-color": "#f9f9f9" });
        $("#cleft_li04").css({ "background-color": "#f9f9f9" });
        $("#nav01").animate({ "left": "-100%" }, 800);
        $("#nav02").animate({ "left": "0%" }, 800);
        $("#nav03").animate({ "left": "0%" }, 800);
        $("#nav04").animate({ "left": "0%" }, 800);
    })
    $("#cleft_li03").click(function() {
        $("#cleft_li01").css({ "background-color": "#f9f9f9" });
        $("#cleft_li02").css({ "background-color": "#f9f9f9" });
        $("#cleft_li03").css({ "background-color": "#ececec" });
        $("#cleft_li04").css({ "background-color": "#f9f9f9" });
        $("#nav01").animate({ "left": "-100%" }, 800);
        $("#nav02").animate({ "left": "-100%" }, 800);
        $("#nav03").animate({ "left": "0%" }, 800);
        $("#nav04").animate({ "left": "0%" }, 800);
    })

    $("#cleft_li04").click(function() {
        $("#cleft_li01").css({ "background-color": "#f9f9f9" });
        $("#cleft_li02").css({ "background-color": "#f9f9f9" });
        $("#cleft_li03").css({ "background-color": "#f9f9f9" });
        $("#cleft_li04").css({ "background-color": "#ececec" });
        // $("#cleft_li05").css({"background-color":"#f9f9f9"});
        // $("#cleft_li07").css({"background-color":"#f9f9f9"});
        // $("#cleft_li08").css({"background-color":"#f9f9f9"});
        $("#nav01").animate({ "left": "-100%" }, 800);
        $("#nav02").animate({ "left": "-100%" }, 800);
        $("#nav03").animate({ "left": "-100%" }, 800);
        $("#nav04").animate({ "left": "0%" }, 800);
        // $("#nav05").animate({"left":"0%"},800);
        // $("#nav07").animate({"left":"0%"},800);
        // $("#nav08").animate({"left":"0%"},800);
    })


}